<template>
  <div>
    <!-- 头部导航 -->
    <div style="border-bottom:1px solid #e1e1e1; margin-bottom:60px;">
      <van-row class="order_top">
        <van-nav-bar title="我想加入" fixed>
          <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
        </van-nav-bar>
      </van-row>
    </div>
    <!-- 内容区域1 -->
    <div class="content">
      <div style="margin-bottom:20px;">感谢您的关注，我们陆续会在不同城市开通服务，请填写申请我们会在第一时间为您推送</div>
      <form>
        <div>
          <span>姓名</span>
          <input type="text" id="name" placeholder="请输入姓名" v-model="name">
        </div>
        <div>
          <span>手机号</span>
          <input type="text" id="phone" placeholder="请输入手机号" v-model="mobileNo">
        </div>
        <div >
          <span>期望城市</span>
          <input type="text" placeholder="请选择城市" @click="showCity">
        </div> 
      </form>
    </div>
    <!-- 内容区域2 -->
    <div class="content2">
      <div class="content2_d1">
          <span>回收经验</span>
          <van-radio-group v-model="radio">
            <van-radio name="1">有</van-radio>
            <van-radio name="2">无</van-radio>
          </van-radio-group>
        </div>
        <div class="content2_d2">
          <span>了解渠道</span>
          <div>
            <van-checkbox-group v-model="result">
              <van-checkbox
                v-for="item in list"
                :key="item"
                :name="item"
              >
              {{ item }}
              </van-checkbox>
            </van-checkbox-group>
          </div>
        </div>
        <div class="content2_d3">我们会以短信方式提醒您注册认证</div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <button  class="footer_btn" @click="submit">提交</button>
    </div>
    <!-- 城市弹出框 -->
    <div v-if="show">
      <van-area :area-list="areaList" :columns-num="2" :areaList="areaList" @cancel="onCancel"  @confirm="onConfirm"/>
    </div>
  </div>
</template>
<script>
import { getAreaList } from "services/area";

export default {
  name: "join",
  data() {
    return {
      name: "", //姓名
      mobileNo: "", //手机号
      radio: "1",
      list: ["朋友推荐", "广告", "公众号"],
      result: ["朋友推荐"],
      show: false,
      adcode: "",
      areaList: {
        province_list: {},
        city_list: {}
      }
    };
  },
  created() {
    getAreaList().then(response => {
      const { object } = response;
      this.funName(object);
      console.log(this.areaList);
      this.allCoverArea = object;
    });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    showCity() {
      this.show = !this.show;
    },
    onCancel() {
      console.log("取消");
    },
    onConfirm() {
      console.log("确认");
    },
    submit() {
      console.log(1);
    },
    funName(e) {
      const that = this;
      e.map(item => {
        const adcode = item.adcode.toString();
        if (item.level === "province") {
          that.areaList.province_list[adcode] = item.name;
        } else if (item.level === "city") {
          that.areaList.city_list[adcode] = item.name;
        }
        if (item.children && item.children.length > 0) {
          that.funName(item.children);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  font-size: 28px;
  padding: 0 60px;
  margin-top: 80px;
  div {
    display: flex;
    justify-content: flex-end;
    span {
      display: inline-flex;
      padding-right: 30px;
      font-size: 32px;
      align-items: center;
      justify-content: flex-end;
    }
    input {
      width: 460px;
      height: 86px;
      border: 1px solid #e1e1e1;
      border-radius: 10px;
      outline: none;
      margin-left: 10px;
      padding-left: 10px;
      margin-bottom: 30px;
    }
  }
}
.content2 {
  padding: 0 60px;
  span {
    font-size: 32px;
    margin-right: 30px;
  }
  .content2_d1 {
    display: flex;
    padding-bottom: 60px;
    .van-radio-group {
      display: flex;
      flex-wrap: wrap;
      .van-radio {
        margin-right: 40px;
      }
    }
  }
  .content2_d2 {
    display: flex;
    padding-bottom: 60px;
    .van-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      .van-checkbox {
        margin-right: 20px;
        .van-checkbox__label {
          font-size: 30px;
        }
      }
    }
  }
  .content2_d3 {
    font-size: 24px;
    color: #5c5c5c;
  }
}
.footer {
  height: 142px;
  position: fixed;
  bottom: 0;
  background: #fff;
  padding: 26px 30px;
  font-size: 36px;
  .footer_btn {
    width: 690px;
    height: 90px;
    color: white;
    background-color: rgb(247, 165, 40);
    border: none;
    border-radius: 50px;
  }
}
</style>
